<template>
  <div>
    <header onclick="history.go(-1)">
      <img :src="require('../assets/go.png')" alt="" />
    </header>
    <van-icon
      class="share-icon"
      name="share-o"
      size="30"
      color="rgb(24, 154, 100)"
      @click="showShare = true"
    />
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
    />
    <div id="content">
      <div class="img-box">
        <img :src="path + item.img" alt="" />
      </div>
      <div class="content-box">
        <h3>{{ item.title }}</h3>
        <p>{{ item.content }}</p>
        <p>期望价格：{{ item.yourprice }}</p>
        <div>
          <van-icon name="phone-o" class="icon-box" /><span class="title">{{
            item.telephone
          }}</span>
          <van-icon name="location-o" class="icon-box" /><span class="title">{{
            item.address
          }}</span>
        </div>
        <div class="user-box">发布人: {{ item.username }}</div>
        <van-divider />
        <van-cell-group>
          <van-field
            v-model="content"
            clearable
            label="评论"
            left-icon="chat-o"
            placeholder="说点什么吧~万一火了呢~"
            @blur="conadd()"
          />
        </van-cell-group>
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-cell class="text" v-for="items in list" :key="items.id">
          <van-cell v-if="items.content!=null" :title="items.user_name+':'">
            {{ items.content }}
          </van-cell>
          </van-cell>
        </van-list>
      </div>
    </div>
  </div>
</template>

<script>
import { aboutView,commentList } from "@/api";
import { Toast } from "vant";
import { mapState } from "vuex";
import axios from "axios";

export default {
  name: "",
  data() {
    return {
      item: {},
      list: [],
      content: "",
      loading: false,
      finished: false,
      showShare: false,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
      ],
    };
  },
  computed: {
    // ...mapState(['badge'])
    ...mapState({
      path: (state) => state.path,
    }),
  },
  created() {
    aboutView({ id: this.$route.params.id })
      .then((res) => {
        console.log(res);
        this.item = res.data;
      })
      .catch((error) => {
        console.log(error);
      });

    commentList({ id: this.$route.params.id })
      .then((res) => {
        console.log(res);
        this.list = res.data;
      })
      .catch((error) => {
        console.log(error);
      });

  },
  methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      this.loading = false;
      this.finished = true;
    },
    onSelect(option) {
      Toast("已成功分享到" + option.name);
      this.showShare = false;
    },
    conadd(){
        axios
        .post("/api/commentadd.php", {
        content: this.content,
        shand_id: this.$route.params.id,
        user_name: localStorage.getItem("username"),
        })
        .then((response) => {
          console.log(response);
          Toast.success("评论成功");
          this.$router.go(0);
        });
    }
  },
};
</script>

<style scoped>
* {
  margin: 0;
}
header {
  position: fixed;
  top: 5px;
  left: 5px;
  background-color: rgba(93, 92, 92, 0.433);
  padding: 5px;
  border-radius: 50%;
}
header img {
  width: 25px;
  height: 25px;
}
.share-icon {
  position: fixed;
  top: 10px;
  right: 10px;
}
#content {
}
.img-box {
  width: 100%;
  height: 50vh;
  background-color: rgba(235, 245, 238, 0.508);
  border-radius: 5%;
}
.img-box img {
  display: flex;
  height: 100%;
  margin: 50px auto;
}
.content-box {
  margin: 5%;
  text-align: left;
}
.content-box p {
  margin-top: 2%;
  font-size: 18px;
  color: rgb(105, 102, 102);
}
.icon-box span {
  margin-top: 2%;
  font-size: 16px;
  color: rgb(166, 181, 158);
}
.icon-box {
  margin-top: 2%;
}
.title {
  color: rgb(166, 181, 158);
}
.text {
  color: rgb(55, 105, 180);
}
.user-box {
  margin-top: 2%;
  text-align: right;
  color: rgb(90, 90, 90);
}
</style>